<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
        <title>GET - httpx.js Examples</title>
        <link rel="stylesheet" href="css/global.css">
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>GET Examples</h1>   
                <a href="index.html" class="btn">Back to index</a>       
            </header>
            <pre id="output">Loading ...</pre>
            <pre id="output2">Loading ...</pre>
            <pre id="output3" class="error">Loading ...</pre>
            <pre id="output4">Loading ...</pre>
            <pre id="output5" class="error">Loading ...</pre>
            <pre id="output6">Loading ...</pre>
            <pre id="output7">Loading ...</pre>
        </div>
        <script src="../dist/httpx.min.js"></script>
        <script>
            var $ = function(id) {
                return document.getElementById(id);
            };

            httpx.get("./php/get.php", function(data) {
                $("output").innerText = this.$request.url + "\n\n" +data;
                console.log(data, this);
            });

            httpx.get("./php/get.php?foo=bar&zh=中文", {test : 123}, function(data) {
                $("output2").innerText = this.$request.url + "\n\n" + data;
                console.log(data, this);
            });

            httpx.get("http://localhost/httpx.js/examples/php/get2.php?foo=bar&zh=中文", {test : 123}, function(data) {
                $("output3").innerText = this.$request.url + "\n\n" + data;
                console.log(data, this);
            }, function(method, url, event) {
                var error = method + " Error : " + " " + url + " " + this.status + " " + this.statusText;
                console.error(error, event);
                $("output3").innerText = error;
            });

            httpx.get({
                url : "./php/get.php?foo=bar&zh=中文",
                data : {
                    test : 123,
                    id : 4543
                },
                headers : {
                    "xxxxx" : "xxxxxxx"
                },
                success : function(data) {
                    $("output4").innerText = this.$request.url + "\n\n" + data;
                    console.log(data, this);
                },
                error : function(method, url, event) {
                    var error = method + " Error : " + " " + url + " " + this.status + " " + this.statusText;
                    console.error(error, event);
                    $("output4").innerText = error;
                }
            });
            
            httpx.get({
                url : "http://localhost/httpx.js/examples/php2/get.php?foo=bar&zh=中文",
                data : {
                    test : 123, 
                    id : 4543
                }, 
                headers : {
                    "xxxxx" : "xxxxxxx"
                },
                success : function(data) {
                    $("output5").innerText = this.$request.url + "\n\n" + data;
                    console.log(data, this);
                }, 
                error : function(method, url, event) {
                    var error = method + " Error 2 : " + " " + url + " " + this.status + " " + this.statusText;
                    console.error(error, event);
                    $("output5").innerText = error;
                }
            });

            // Cross domain
            httpx.get("http://api.httpxjs.com/", {
                test : 123,
                id : 4543,
                name : 'ajax',
                bar : 'far'
            }, function (result) {
                $("output6").innerText = 'Cross domain request result: \n';
                $("output6").innerText += JSON.stringify(JSON.parse(result), null, '   ');
            });

            // Options
            httpx.get("http://api.httpxjs.com/", {
                test : 123,
                id : 4543,
                name : 'ajax',
                bar : 'far'
            }, function (result) {
                var text = 'request options:\n';
                text += JSON.stringify(this.$request, null, '   ') + '\n\n';
                text += 'result:\n';
                text += JSON.stringify(result, null, '   ');

                $("output7").innerText = text;
            }, null, {
                debug : true,
                dataType : 'json',
                jsonp : 'jsonpCallback',
                headers : {
                    'Access-Token' : 'fa346576sdfds6ASfhu25uit5DL4ohMWrb9',
                    'X-XXX-XXX' : 'PHP 7.0'
                }
            });
        </script>
    </body>
</html>